<template>
	<view>
		<uNavbar title="批量退出孵化"></uNavbar>
		<view class="saleslist_top flex_ld">
			<view class="sales_l flex_dq">
				<text>默认排序</text>
				<image v-if="state" src="../../static/icon/toppp.png" mode="" @click="changeUp"></image>
				<image v-if="!state" src="../../static/icon/notop.png" mode="" @click="changeUp"></image>
			</view>
			<view class="sales_r flex_dq" @click="changeQuan">
				<image src="../../static/icon/i_checkbox.png" mode="aspectFill"  v-if="isSelect"></image>
				<image src="../../static/icon/i_checkbox1.png" mode="" v-else ></image>
				<text :class="isSelect ?'actives':''">全选</text>
			</view>
		</view>
		<view class="saleslist flex_Z">

			<view class="saleslist_center flex_Z">
				<view class="saleslist_center_box flex_ld" v-for="(item,index) in bulkList" :key="item.id">
					<view class="commodity ">
						<image :src="item.good.goods_image" mode=""></image>
						<text class="texts1">{{item.goods_name}}</text>
						<text class="texts2">{{item.goods_number}}/{{item.good.circulation}}</text>
					</view>
					<view class="selects">
						<image src="../../static/icon/i_checkbox.png" mode="aspectFill"  v-if="item.selected" @click="isClickDuo(item,index)"></image>
						<image src="../../static/icon/i_checkbox1.png" mode="" v-else @click="isClickDuo(item,index)"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="empty2"></view>
		<view class="btn_qs">
			<view class="log_out  flex_c" :class="selectId.length>0?'':'bgss'" @click="boxShow5=true" >
				<image v-if="selectId.length" class="highlights" src="../../static/image/mask.png" mode=""></image>
				<text>退出孵化</text>
			</view>

		</view>

		<u-popup :show="boxShow5 " mode="center" @close="boxShow5 = false " closeable bgColor="transparent">
			<view class="hatch_box flex_ZC">
				<view class="hatch_box_hr flex_ZC">
					<text class="f32 c3">是否确定退出孵化?</text>
					<text class="f32 c3">该操作不可逆</text>
				</view>
				<view class="hatch_box_tip flex_Z">
					<text >不退出孵化：</text>
					<text >{{commodityInfo.hatch_goods_value}}</text>
				</view>
				<view class="hatch_box_tip flex_Z">
					<text>退出孵化后：</text>
					<text>{{commodityInfo.out_hatch_goods_value}}</text>
				</view>
				<view class="btn_xz flex_ld_b">
					<text @click="boxShow5 = false">取消</text>
					<text @click="isCreateOrder()">确认</text>
				</view>
			</view> 
		</u-popup>
		
		<noDatas  :xxxList="bulkList" :status="status"></noDatas>

	</view>
</template>

<script>
	import NP from 'number-precision'

	import {
		detail,
		goodsList,
		updateStatus
	} from "../../api/object.js";
	import {
		outHatch
	} from "../../api/order.js"
	export default {
		data() {
			return {
				id: '',
				ids: '',
				state: false, //切换
				isSelect: false, //全选多选
				bulkList: [],
				selectId: [], // 多选的id
				commodityInfo:{},
				page: 1,
				size: 20,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				boxShow5:false,
			}
		},
		onLoad(e) {
			this.id = e.id
			this.ids = e.ids
			this.initDetail()
			this.initList()
		},

		methods: {
			initDetail() {
				detail({
					id: this.ids
				}).then(res => {
					console.log(res, "详情")
					if (res.code == 1) {
					this.commodityInfo = res.data
					}
				})
			},
			// 初始化列表
			initList() {
				goodsList({
					page: this.page,
					goods_id: this.id,
					type:1,
					status:0
				}).then(res => {
					console.log(res, "列表数据")
					if (res.code == 1) {
						let list = res.data.data;
						this.bulkList = this.page == 1 ? list : this.bulkList.concat(list);
						console.log(this.bulkList);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
				})
			},
			// 平台首发创建订单并支付
			isCreateOrder() {
				console.log(this.selectId);
				let data = {
					id: this.selectId.join(),
				}
				uni.showLoading({
					title: '加载中'
				});
				outHatch(data).then(res => {
					console.log(res)
					uni.hideLoading()
					if (res.code == 1) {
						uni.$u.toast(res.msg);
						this.boxShow5 = false
						this.page = 1
						this.selectId = []
						this.bulkList = []
						this.initList()
					}
				})
			},
			// 多选
			isClickDuo(item, index) {
				// this.temporary = item
				// console.log(item);
				// console.log(index);
				let idIndex = this.selectId.indexOf(item.id);
				console.log(idIndex);
				this.bulkList[index].selected = !this.bulkList[index].selected;
				// 如果点击得已经被勾选
				// ----------------- 当前指导价大于防屯价用防屯价计算，反之用指导价计算 ------------------------
				if (idIndex != -1) {
					//这个返回的是被删除的内容
					this.selectId.splice(idIndex, 1);
					
				} else {
					this.selectId.push(item.id);
				}
				if (this.bulkList.length == this.selectId.length) {
					this.isSelect = true
				} else {
					this.isSelect = false
				}
				console.log(this.selectId);
				
			},
			// 全选 反选
			changeQuan() {
				this.isSelect = !this.isSelect
				if (this.isSelect) {
					this.bulkList.forEach((item, index) => {
						if (!item.selected) {
							this.selectId.push(item.id);
						}
						this.bulkList[index].selected = true;

					})
					console.log(this.selectId);
					
				} else {
					this.bulkList.forEach((item, index) => {
						this.bulkList[index].selected = false;
						this.selectId = [];
					
					})
					console.log(this.selectId);
					
				}
			},
			// 切换
			changeUp() {
				this.state = !this.state
				if (this.state) {
					let newList = this.bulkList.slice().sort((news, olds) => news.goods_number - olds.goods_number)
					this.bulkList = newList
				} else {
					let newList = this.bulkList.slice().sort((news, olds) => olds.goods_number - news.goods_number)
					this.bulkList = newList
				}
			}, 
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('下拉刷新');
			let that = this;
			setTimeout(function() {
				that.page = 1,
				that.bulkList = []
				that.selectId = []
				that.initList()
			}, 800);
		
		},
		//触底加载
		onReachBottom() {
			console.log('触底加载');
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.initList()
			}
		}
	}
</script>
<style>
	page {
		background:#E0DDDA;
	}
</style>

<style scoped lang="scss">
	.saleslist_top{
		width: 750rpx;
		margin: 0 auto;
		position: fixed;
		background:#E0DDDA;
		height: 70rpx;
		z-index: 99;
		padding-bottom: 20rpx;
	}
	.bulk_box {
		width: 690rpx;
		height: 254rpx;
		background: #f2f2f2;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 30rpx auto;
	}

	.bulk_l {
		margin: 0 24rpx;
	}

	.bulk_l>image {
		width: 206rpx;
		height: 206rpx;
		border-radius: 16rpx;
	}

.bulk_r {
		width: 350rpx;
		/* background: pink; */
	}

	.bulk_r_top {
		width: 350rpx;
		white-space: nowrap;          /* 防止文本换行 */
		  overflow: hidden;             /* 隐藏超出区域的文本 */
		  text-overflow: ellipsis;      /* 超出部分显示省略号 */
		font-size: 32rpx;
		color: #333;
		/* background: pink; */
	}

	.bulk_r_center {
		width: 95%;
		font-size: 26rpx;
		color: #A6A5AF;
		margin: 16rpx 0;
	}

	.money>image {
		width: 28rpx;
		height: 28rpx;
	}

	.saleslist {
		width: 690rpx;
		margin: 0 auto;
		margin-top: 50rpx;
	}

	.sales_l {
		margin-left: 30rpx;
		font-size: 32rpx;
		color: #333;
	}

	.sales_l>image {
		width: 30rpx;
		height: 30rpx;
		margin-left: 12rpx;
	}

	.sales_r {
		margin-right: 30rpx;
		font-size: 28rpx;
		color: #333;
	}
	.sales_r>image{
		width: 36rpx;
		height: 36rpx;
	}

	.sales_r>text {
		margin-left: 6rpx;
	}

	.saleslist_center {
		margin: 30rpx 0;
	}

	.saleslist_center_box {
		width: 686rpx;
		height: 88rpx;
		background: #f2f2f2;
		border-radius: 20rpx;
		margin: 0 auto 30rpx;
	}
		
	.texts1{
		width: 50%;
		margin-left: 20rpx ;
	}
	.commodity {
		display: flex;
		width: 90%;
		font-size: 28rpx;
		color: #333;
		margin-left: 24rpx;
		align-items: center;
		>image{
			width: 54rpx;
			height: 54rpx;
			// background: #D8D8D8;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
		}
	}
	
	.commodity>text:nth-child(1) {
		width: 70%;
		margin-left: 20rpx;
	}

	.commodity>text:nth-child(3) {
		width: 30%;
		/* background:skyblue; */
	}

	.commodity_c {
		width: 40%;
		/* background: pink; */
	}


	.selects {
		width: 10%;
	}
	.selects>image{
		width: 36rpx;
		height: 36rpx;
	}

	.actives {
		color: #A68A64 !important;
	}

	.log_out {
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 92%;
	}

	.log_out>text {
		text-align: center;
		width: 100%;
		background: linear-gradient( 90deg, #AB8E68 0%, #D7BA93 100%);
		color: #ffffff;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
	}


	.bgss{
		opacity: 0.5;
	}
	.btn_qs{
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		height: 140rpx;
		/* background: pink; */
		background:#E0DDDA;
	}
	

	.hatch_box {
		width: 600rpx;
		min-height: 400rpx;
		background: #E0DDDA;
		margin: 0 auto;
		border-radius: 20rpx;
		color: #333;
		padding-top: 30rpx;
		padding-bottom: 40rpx;
		// background: pink;
	}
	.hatch_box_hr{
		margin: 40rpx 0;
	}
	
	.hatch_box>text {
		width: 560rpx;
		text-align: center;
		margin: 40rpx 0;
	}
	.hatch_box_tip{
		width: 540rpx;
		margin: 20rpx 0;
	}
	.hatch_box_tip>text:nth-child(1){
		font-size: 32rpx;
		color: #333333;
		// font-weight: 700;
		margin-left: 30rpx;
	}
	.hatch_box_tip>text:nth-child(2){
		font-size: 28rpx;
		color: #666666;
		margin-left: 80rpx;
		margin-top: 24rpx;
	}
	
	.btn_xz {
		width: 100%;
		margin-top: 80rpx;
	}
	
	.btn_xz>text:nth-child(1) {
		width: 220rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		color: #A68A64;
		border: 1rpx solid #A68A64;
		border-radius: 280rpx;
	}
	
	.btn_xz>text:nth-child(2) {
		width: 220rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: #A68A64;
		font-size: 28rpx;
		color: #ffffff;
		border-radius: 280rpx;
	}
</style>